<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
<canvas id="canvas" width="1920" height="1000"></canvas>
</body>
<script>
    var oMyCanvas=document.getElementById('canvas');

    if (oMyCanvas && oMyCanvas.getContext) {
        // 转换为 2D 图形对象；
        var context = oMyCanvas.getContext("2d");

        if (context) {
            // 第一条曲线
            // 起点坐标
            context.moveTo(50, 0);
            context.bezierCurveTo(
                // cp1x cp1y    // 起点 - 控制器坐标
                50, 50,
                // cp2x cp2y    // 结束点 - 控制器坐标
                150, 50,
                // x y          // 结束点坐标
                150, 0,
            );
            context.bezierCurveTo(150, 50, 300, 50, 300, 0);
            context.stroke();

            // 第二条曲线
            context.beginPath();
            context.moveTo(150, 100);
            context.quadraticCurveTo(150, 250, 250, 250);
            context.stroke();
            context.quadraticCurveTo(420, 150, 550, 250);
            context.fill();
            context.stroke();
        }
    }
</script>
</html>
